<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">

  <script src="/js/jquery-3.6.1.min.js"></script>
</head>
<body>
<div class="container-fluid">

  <h3 id = "h">学生信息</h3>
  <div>
    <input type="text" name = "name" id = "search-name" placeholder="请输入要查询的学生姓名">
    <button type="submit" class="btn" id = "btn1" >查询</button>
  </div>
  <table class="table table-striped">
    <thead>
    <tr>
      <th>#</th>
      <th>学号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>分数</th>
      <th style = "width : 100px;">操作</th>
    </tr>
    </thead>
    <tbody id = "studentTb"></tbody>
  </table>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick = "preAdd();">
    新增学生信息
  </button>
</div>


<div class="modal fade" tabindex="-1" role="dialog" id = "myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">学生信息</h4>
      </div>
      <div class="modal-body">
        <form id = "studentForm">
          <input hidden = "hidden" id = "id" name = "id"/>
          <div class="form-group">
            <label for="no">学号</label>
            <input type="text" class="form-control" id="no" name = "no" placeholder="学号">
          </div>
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" name = "name" placeholder="姓名">
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" name = "password" placeholder="密码">
          </div>
          <div class="form-group">
            <label for="sex">性别</label>
            <select class="form-control" id = "sex" name = "sex">
              <option value = "1">男</option>
              <option value = "2">女</option>
            </select>
          </div>
          <div class="form-group">
            <label for="age">年龄</label>
            <input type="text" class="form-control" id="age" name = "age" placeholder="年龄">
          </div>
          <div class="form-group">
            <label for="score">分数</label>
            <input type="text" class="form-control" id="score" name = "score" placeholder="分数">
          </div>
        </form>
        <!--表单结束-->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick = "saveStudent();">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src = "/js/bootstrap.min.js"></script>

<script >
  $(document).ready(function (){
    disp_all();
    $("#btn1").click(function (){
      search();
    })

  });
  /**
   * 显示全部学生的信息
   */
  function disp_all(){
    $.ajax({
      url:"/webapi/student/list"
    }).done(function(rs){
      console.log(rs);
      var len = rs.length;
      var html = "";
      for (var i = 0; i < len; i++) {
        var item = rs[i];
        html +="<tr>"
                +"<td>" + item.id+"</td>"
                +"<td>" + item.no+"</td>"
                +"<td>" + item.name+"</td>"
                +"<td>" + judge(item.sex)+"</td>"
                +"<td>" + item.age+"</td>"
                +"<td>" + item.score+"</td>"
                +"<td> <a href='#' onclick = 'editStudent("+item.id+");'>编辑</a>" +
                "    <a href = '#' onclick = 'deleteStudent("+item.id+");'>删除</a></td>"
                +"</tr>";
      }
      $("#studentTb").html(html);
    })
  }
  /**
   * 判断当前学生性别，0，1，2分别表示未知，男，女。
   * @param d
   * @returns {string}
   */
  function judge(d){
    var ssex;
    switch(d){
      case 0:
        ssex = "未知";
        break;
      case 1:
        ssex = "男";
        break;
      case 2:
        ssex = "女";
    }
    return ssex;
  }
  function preAdd(){
    $("#id").val(0);//提示新增
  }

  function saveStudent(){
    var data = $("#studentForm").serialize();
    var id = $("#id").val();
    if (id < 1){
      $.ajax({
        url: "/webapi/student/insert",
        method: "post",
        data: data
      }).done(function (){
        disp_all();
        $("#myModal").modal("hide");
      })
    }
    else{
      $.ajax({
        url: "/webapi/student/update",
        method: "put",
        data: data
      }).done(function (){
        disp_all();
        console.log(1234);
        $("#myModal").modal("hide");
      })
    }
  }
  function editStudent(id){
    $("#myModal").modal("show");
    $.ajax({
      url: "/webapi/student/get/"+id
    }).done(function (rs){
      $("#id").val(rs.id);
      $("#no").val(rs.no);
      $("#name").val(rs.name);
      $("#password").val(rs.password);
      $("#sex").val(rs.sex);
      $("#age").val(rs.age);
      $("#score").val(rs.score);
    })
  }
  function deleteStudent(id){
    if(confirm("确定删除？")){
      $.ajax({
        url: "/webapi/student/delete/"+id,
        method: "delete"
      }).done(function (){
        disp_all();
      });
    }
  }
  /**
   * 按照名称查询学生信息
   */
  function search(){
    $.ajax({
      type: "get",
      dataType: 'json',
      url: "/webapi/student/search",
      data: {"name": $("#search-name").val()}
    }).done(function(data){
        var len = data.length;
        $("#h").text("查到"+len+"条数据");
        var str = "";
        for (var i = 0; i < len; i++) {
          var item = data[i];
          str +="<tr>"
                +"<td>" + item.id+"</td>"
                +"<td>" + item.no+"</td>"
                +"<td>" + item.name+"</td>"
                +"<td>" + judge(item.sex)+"</td>"
                +"<td>" + item.age+"</td>"
                +"<td>" + item.score+"</td>" +"<td> <a href='#' onclick = 'editStudent("+item.id+");'>编辑</a>" +
                  "    <a href = '#' onclick = 'deleteStudent("+item.id+");'>删除</a></td>"
                +"</tr>";
      }
      $("#studentTb").html(str);
    })
  }
</script>
</body>
</html>